<template>
  <div>
    <div class="app-basement" style="background:#F7F9FD;">
      <div class="content-basement content-padding">
        <div class="content-title">
          <span>报名科目</span>
        </div>
        <div style="position: relative; height: 90px; margin-top: 36px;background-color: #fff ;display: flex;align-items: center;">
          <p
            @click="chenge('l')"
            class="hoverP"
            style="font-size: 16px; border-radius: 8px; background: #f5f5f5; text-align: center; line-height: 40px; width: 40px; position: absolute; right:66px"
          >
            <i class="el-icon-arrow-left"></i>
          </p>
          <div class="content-tab">
            <li
              @click="activeClick(index, item)"
              v-for="(item, index) in init.selected_gz.split(',')"
              :key="index"
              :ref="'active' + index"
              :class="active == index ? 'active-li' : ''"
            >
              <p>{{ item }}</p>
              <div></div>
            </li>
          </div>
          <p
            @click="chenge('r')"
            class="hoverP"
            style="font-size: 16px; border-radius: 8px; background: #f5f5f5; text-align: center; line-height: 40px; width: 40px; position: absolute; right: 20px"
          >
            <i class="el-icon-arrow-right"></i>
          </p>
        </div>
        <div class="content-li-box" v-loading="loading">
          <ul style="padding: 36px 20px; min-height: 198px; background: #fff">
            <li :class="index % 5 == 0 ? 'noneLi' : ''" v-for="(it, index) in dataList" :key="it.id" @click="goApply(gz)" v-html="titlebr(it.title)"></li>
            <!-- <div
              v-if="dataList && dataList.length && dataList.length % 5 != 0 && dataList.length != 0"
              style="width: 220px; height: 100px; margin-left: 25px; margin-top: 20px"
            ></div> -->
          </ul>
        </div>
      </div>
    </div>
    <div v-if="this.http.indexOf('lcak') != -1" class="app-basement content-top">
      <div class="content-basement content-padding">
        <div class="content-title">
          <span>职业卫生公告</span>
          <p
            style="margin: 0"
            @click="
              () => {
                this.$store.commit('SET_ACTIVE', '11');
              }
            "
          >
            更多>
          </p>
        </div>
        <div class="content-px-box">
          <!-- :class="index%3==0?'noneLi':''" v-for="(it,index) in item.list" :key='it.id' -->
          <ul>
            <li :class="index % 4 == 0 ? 'noneLi' : ''" v-for="(it, index) in zypxList" :key="it.id" @click="clickphealthxBox(it)">
              <img :src="it.cover ? it.cover : imgsrc" alt="" />
              <div>
                <p>{{ it.title }}</p>
                <span style="display: block; line-height: 22px; font-size: 14px; margin-top: 18px">
                  {{ it.create_time.split("-")[0] + "年" + it.create_time.split("-")[1] + "月" + it.create_time.split("-")[2].split(" ")[0] + "日" }}
                </span>
                <div class="operon">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="app-basement content-top">
      <div class="content-basement content-padding">
        <div class="content-title">
          <span>培训公告</span>
          <p
            style="margin: 0"
            @click="
              () => {
                this.$store.commit('SET_ACTIVE', '6');
              }
            "
          >
            更多>
          </p>
        </div>
        <div class="content-px-box">
          <!-- :class="index%3==0?'noneLi':''" v-for="(it,index) in item.list" :key='it.id' -->
          <ul>
            <li :class="index % 4 == 0 ? 'noneLi' : ''" v-for="(it, index) in pxList" :key="it.id" @click="clickpxBox(it)">
              <img :src="it.cover ? it.cover : imgsrc" alt="" />
              <div>
                <p>{{ it.title }}</p>
                <span style="display: block; line-height: 22px; font-size: 14px; margin-top: 18px">
                  {{ it.create_time.split("-")[0] + "年" + it.create_time.split("-")[1] + "月" + it.create_time.split("-")[2].split(" ")[0] + "日" }}
                </span>
                <div class="operon">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <div v-loading='loading' class="app-basement content-top" v-for="(item,index) in dataList" :key='index' :style="index%2==0?{
            background:'#F5F9FF',
        }:''">
            <div class="content-basement content-padding">
                <div class="content-title">
                    <span>{{item.title}}</span>
                </div>
                <div class="content-li-box">
                    <ul>
                        <li :class="index%5==0?'noneLi':''" v-for="(it,index) in item.list" :key='it.id' @click="goApply(item.title)" v-html="titlebr(it.title)" >
                        </li>
                        <div v-if="item.list&&item.list.length&&item.list.length %5!=0&&item.list.length !=0" style="width:220px;height:100px;margin-left:25px;margin-top: 25px;">

                        </div>
                    </ul>
                </div>
            </div>
        </div> -->
    
    <div class="app-basement content-top" style="background-color: #F7F9FD;">
      <div class="content-basement content-padding">
        <div class="content-title">
          <span>政策法规</span>
          <p
            style="margin: 0"
            @click="
              () => {
                this.$store.commit('SET_ACTIVE', '5');
              }
            "
          >
            更多>
          </p>
        </div>
        <div class="content-zc-box">
          <ul>
            <li :class="index % 3 == 0 ? 'noneLi' : ''" v-for="(item, index) in zcList" :key="item.id" @click="clickBox(item)" :title="item.title">
              <div class="liDiv">
                <div style="display: flex; justify-content: center; flex-direction: column; align-items: center">
                  <p style="font-size: 28px; font-weight: 600">
                    {{ item.update_time ? item.update_time.split(" ")[0].split("-")[2] : item.create_time.split(" ")[0].split("-")[2] }}
                  </p>
                  <p style="font-size: 10px">
                    {{
                      item.update_time
                        ? item.update_time.split(" ")[0].split("-")[0] + "-" + item.update_time.split(" ")[0].split("-")[1]
                        : item.create_time.split(" ")[0].split("-")[0] + "-" + item.create_time.split(" ")[0].split("-")[1]
                    }}
                  </p>
                </div>
                <span>
                  {{ item.title }}
                </span>
              </div>
              <div class="moneDiv">
                <i>more</i>
                <i class="iconfont icon-danxiangjiantou"></i>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { subjectList, articleList } from "@/api/apply.js";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["init"]),
  },
  data() {
    return {
      http: process.env.NODE_ENV === "development" ? process.env.VUE_APP_BASE_API : window.location.href.slice(0, window.location.href.indexOf("/site")),
      dataList: [], //所有科目
      zcList: [], //政策法规
      pxList: [], //培训公告
      zypxList: [], //职业卫生培训公告
      loading: false,
      imgsrc: require("@/assets/pxgg.png"),
      imgsrc2: require("@/assets/zcfg.jpg"),
      active: 0,
      gz: "",
    };
  },
  methods: {
    async getdata(item) {
      this.dataList = [];
      this.loading = true;
      // for(let i=0;i<list.length;i++){
      //     let item = list[i]
      //     let index = i
      //     await subjectList(item).then(res=>{
      //         if(index+1==list.length){
      //             this.loading = false
      //         }
      //         this.dataList.push({list:res,title:item,srot:index})
      //     })
      // }
      await subjectList(item).then((res) => {
        this.loading = false;
        this.dataList = res;
      });
      // console.log(this.init)
      // this.init.selected_gz.split(',').map(async (item,index)=>{
      //     await subjectList(item).then(res=>{
      //         console.log(2121000000000000000)
      //         this.dataList.push({list:res,title:item,srot:index})
      //     })
      // })
      // console.log(this.dataList)
    },
    activeClick(data, item) {
      this.gz = item;
      // this.$refs['active'+data][0].offsetWidth>this.$refs['active'+data][0].offsetLeft&&
      if (this.active < data) {
        if (this.$refs["active" + data][0].offsetLeft + this.$refs["active" + data][0].offsetWidth >= this.$refs["active" + data][0].parentNode.offsetWidth) {
          this.$refs["active" + data][0].parentNode.scrollLeft = this.$refs["active" + data][0].parentNode.scrollLeft + this.$refs["active" + data][0].offsetWidth;
        }
      } else if (this.active > data) {
        this.$refs["active" + data][0].parentNode.scrollLeft = this.$refs["active" + data][0].parentNode.scrollLeft - this.$refs["active" + (data + 1)][0].offsetWidth;
      }
      this.$nextTick(() => {
        for (let item in this.$refs) {
          if (this.active < item[item.length - 1]) {
            this.$refs[item][0].children["1"].style.transform = "";
          } else {
            this.$refs[item][0].children["1"].style.transform = `translateX(${this.$refs["active" + data][0].offsetWidth - 15}px)`;
          }
        }
        this.active = data;
        this.$refs["active" + data][0].children["1"].style.transform = `translateX(${this.$refs["active" + data][0].offsetWidth / 2 - 15}px)`;
      });
      this.getdata(item);
      // console.log(e,'211122'); ['active'+data].offsetWidth
      // this.$refs.forEach(item => {
      // console.log(this.$refs['active'+data].children);
      // });

      //transform: translateX(300%);
    },
    chenge(ferts) {
      if (ferts == "l") {
        if (this.active != 0) {
          this.activeClick(this.active - 1, this.init.selected_gz.split(",")[this.active - 1]);
        } else {
          return false;
        }
      } else {
        if(this.active == this.init.selected_gz.split(",").length - 1){
          return false
        }
        if (this.active < this.init.selected_gz.split(",").length + 8) {
          this.activeClick(this.active + 1, this.init.selected_gz.split(",")[this.active + 1]);
        } else {
          return false;
        }
      }
    },
    compare(prop) {
      return (a, b) => {
        // return (a.srot - b.srot)
        let value1 = a[prop];
        let value2 = b[prop];
        return value1 - value2;
      };
    },
    goApply(name) {
      if(this.http.includes('dkaq')||this.http.includes('xcaq')){
        return
      }
      this.$router.push({
        path: "/apply",
        query: {
          name,
        },
      });
    },
    clickBox(row) {
      // console.log(row)
      // return
      this.$router.push({
        path: "/training/details",
        query: {
          src: row.file,
        },
      });
    },
    clickpxBox(row) {
      this.$router.push({
        path: "/regulations/details",
        query: {
          content: row.content,
          title: row.title,
          date: row.create_time,
        },
      });
    },
    clickphealthxBox(row) {
      this.$router.push({
        path: "/healthregulations/details",
        query: {
          content: row.content,
          title: row.title,
          date: row.create_time,
        },
      });
    },
    //标题换行
    titlebr(a) {
      // let list =  a.split('')
      let str = a;
      let isShow = true;
      // for(let i=0;i<10;i++){
      //     if(list[i]==')'||list[i]=='）'){
      //         isShow=false
      //         break
      //     }else{
      //         isShow=true
      //     }
      // }
      // if(isShow){
      //     for(let i=0;i<list.length;i++){
      //         let item = list[i]
      //         if(item=='（'||item=="("){
      //             str=a.slice(0,i)+'<div style="font-size:14px;">'+a.slice(i,a.length)+'</div>'
      //             // if(a.length>10){
      //             //     // console.log(a.slice(i,a.length) ,'22222');
      //             // }else{
      //             //    str=a
      //             // }
      //            break
      //         }else{
      //            str=a
      //         }
      //     }
      // }else{
      //     str=a
      // }
      return str;
    },
  },
  created() {
    articleList({ page: 1, limit: 6, category: "政策法规" }).then((res) => {
      if (res.code == 200) {
        this.zcList = res.data.list;
      }
    });
    articleList({ page: 1, limit: 4, category: "培训动态" }).then((res) => {
      if (res.code == 200) {
        this.pxList = res.data.list;
      }
    });
    articleList({ page: 1, limit: 4, category: "职业卫生培训动态" }).then((res) => {
      if (res.code == 200) {
        this.zypxList = res.data.list;
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.activeClick(0, this.init.selected_gz.split(",")[0]);
    });
  },
};
</script>
ntent-tab
<style lang="scss" scoped>
.content-top {
  margin-top: 30px;
}
.content-padding {
  padding: 100px 0;
}
.content-title {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  & > span {
    display: block;
    // padding:18px 0;
    font-size: 34px;
    font-weight: 600;
    color: #333333;
    // &::after{
    //     content:'';
    //     display: block;
    //     margin-top:8px;
    //     height:8px ;
    //     width:64px;
    //     background:linear-gradient(to right,#1677FF, #31AFFF , #ffffff) ;
    // }
  }
  & > p {
    font-size: 14px;
    color: #999;
    // float:right;
    position: absolute;
    cursor: pointer;
    top: 30%;
    right: 0;
    padding: 6px 20px;
    border: 1px solid #a3abb7;
    border-radius: 18px;
    &:hover {
      color: #fff;
      background: #1677ff;
      border-color: #1677ff;
    }
  }
}

.content-li-box {
  margin-top: 5px;
  ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
      width: 220px;
      height: 100px;
      margin-left: 15px;
      margin-top: 20px;
      // background: #f00;
      background: #F4F7FF;
      // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      color: #333;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 0 10px;
      cursor: pointer;
      border-radius: 4px;
      span {
        color: #333333 ;
        font-size: 18px;
      }

      &:hover {
        background: #0841FF ;
        color:#fff;
        margin-top: 15px;
        box-shadow: 0 6px 8px -2px rgba(0, 82, 217, 0.5);
      }
    }
  }
}
.hoverP {
  font-size: 20px !important;
  font-weight: 800 !important;
}
.hoverP:hover {
  cursor: pointer;
  color: #fff;
  background: #0841FF !important;
  box-shadow: 0 2px 6px -1px rgba(51, 51, 51, 0.2);
}
.content-tab {
  width: 88.2%;
  overflow: auto;
  white-space: nowrap;
  position: absolute;
  // top: 0;
  left: 24px;
  right: 0;
  bottom: 0;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #78b4b4;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #ededed;
  }
  li {
    list-style-type: none;
    // padding:10px 16px;
    height: 70px;
    display: inline-block;
    // display: flex;
    // justify-content: flex-end;
    // // align-items: center;
    // flex-direction: column;
    cursor: pointer;
    p {
      padding: 10px 16px;
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 15px;
      border-radius: 4px;
    }
    &:hover {
      P{
        background: #0841FF;
        color: #fff;
      }
    }
  }
  .active-li {
    div {
      width: 30px;
      height: 3px;
      background: #0841FF;
      transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    p {
      margin-bottom: 12px;
      background: #0841FF;
      color: #fff;
    }
  }
}
@keyframes myActive {
  0% {
    background: red;
  }
  25% {
    background: yellow;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}
.noneLi {
  margin-left: 0 !important;
}
.content-zc-box {
  margin-top: 5px;
  ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
      width: 380px;
      height: 138px;
      margin-left: 25px;
      margin-top: 25px;
      // background: #f00;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      // justify-content: center;
      // align-items: center;

      cursor: pointer;
      border-radius: 6px;
      flex-direction: column;
      .liDiv {
        height: 93px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 20px;
        span {
          color: #000;
          font-size: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // display: -webkit-box;
          // -webkit-line-clamp: 1;
          // -webkit-box-orient: vertical;
          flex: 1;
        }
        & > p {
          color: #999;
          font-size: 14px;
        }
      }
      .moneDiv {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border-top: 1px solid #eee;
        i {
          font-style: inherit !important;
        }
        .icon-danxiangjiantou {
          font-size: 24px;
        }
      }
      &:hover {
        .moneDiv {
          background: #1677ff;
          color: #fff;
        }
        // span{
        //     color:#fff;
        // }
        // p{
        //     color:rgba($color: #fff, $alpha: 0.8)
        // }
      }
    }
  }
}
.content-px-box {
  margin-top: 5px;
  ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
      width: 280px;
      height: 240px;
      margin-left: 25px;
      margin-top: 25px;
      // background: #f00;
      background: #fff;
      box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.06);
      display: flex;
      // justify-content: center;
      // align-items: center;
      // padding:20px 10px;
      cursor: pointer;
      border-radius: 6px;
      flex-direction: column;
      // span{
      //     color: #000;
      //     font-size: 20px;
      // }
      // p{
      //     color: #999;
      //     font-size: 14px;
      // }

      & > img {
        height: 126px;
        // border-top-left-radius: 6px;
        // border-top-right-radius: 6px;
      }
      & > div {
        display: flex;
        flex-direction: column;
        height: calc(100% - 126px);
        // align-items: center;
        // justify-content: center;
        padding: 20px 40px 0 20px;
        position: relative;
        // flex-wrap: wrap;
        .operon {
          position: absolute;
          right: 0;
          top: 0;
          width: 0px;
          height: 114px;
          background: #1677ff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          overflow: hidden;
          color: #fff;
          font-weight: 600;
        }
        span {
          display: inline-block;
          margin-right: 12px;
          // width: 35px;
          color: #98a3b7;
        }
        p {
          // flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 600;
          // height: 100%;
          // display: flex;
          // flex-direction: column;
          // align-items: center;
        }
      }
      // &::after{
      //     display: block;
      //     content:'';
      //     height:3px;
      //     width:28px;
      //     background:#1677FF;
      //     margin: 0 auto;
      //     // margin-top:10px;
      // }
      &:hover {
        // background: #1677FF;
        // span{
        //     color:#fff;
        // }
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        div {
          p {
            color: #1677ff;
          }
          .operon {
            transition: width 0.3s;
            width: 20px;
          }
        }
      }
    }
  }
}
</style>
